<template>
	<view>
		<view class="top">
			<u-icon name="arrow-left" color="#fff" size="30" @click="returnbtn"></u-icon>
			<u--text text="订单详情" align="center" color="#fff" size="22" margin="4vh 0 0 0"></u--text>
		</view>
		<view class="bgtop"></view>
		<view class="card">
			<text style="font-weight: bold;font-size: 34rpx;">核销码:{{OrderList.verificationCode}}</text><br />
			<text
				style="font-weight: bold;font-size: 34rpx;line-height: 80rpx;">车辆:{{OrderList.cheCar.carNumber}}</text>

			<view class="hr"></view>
			<u--text text="服务内容" size="17" bold lineHeight="80rpx"></u--text>

			<view v-for="(item,index) in serviceDetails.serviceItems" :key="index">
				<view class="info">
					<!-- <u--text text="车辆精洗" size="14" lineHeight="80rpx"></u--text><br /> -->
					<text>{{item.name}}</text><br />

					<text>￥{{item.money}}</text>
				</view>
			</view>


			<view class="hr"></view>
			<u--text text="订单信息" size="17" bold lineHeight="100rpx"></u--text>
			<view class="info">
				<u--text text="原价" size="16" lineHeight="60rpx"></u--text>
				<text>￥{{OrderList.totalPrice}}</text>
			</view>
			<view class="info">
				<u--text text="优惠" size="16" lineHeight="60rpx"></u--text>
				<text>￥{{youhui}}</text>
			</view>
			<view class="info">
				<u--text text="实付金额" size="16" lineHeight="60rpx"></u--text>
				<text>￥{{OrderList.realPrice}}</text>
			</view>
			<view class="info">
				<u--text text="订单编号" size="16" lineHeight="60rpx"></u--text>
				<text>{{OrderList.number}}</text>
			</view>
			<view class="info">
				<u--text text="预约时间" size="16" lineHeight="60rpx"></u--text>
				<text>{{OrderList.subscribeTime}}</text>
			</view>
			<view class="info">
				<u--text text="支付时间" size="16" lineHeight="60rpx"></u--text>
				<!-- <u--text text="2023-03-18 19:14:28" size="16" align="right" lineHeight="60rpx"></u--text> -->
				<text>{{OrderList.createTime}}</text>
			</view>
			<view class="info">
				<u--text text="核销时间" size="16" lineHeight="60rpx"></u--text>
				<!-- <u--text text="00000" size="16" align="right" lineHeight="60rpx"></u--text> -->
				<text>{{OrderList.verificationTime}}</text>
			</view>
		</view>

		<view class="orderinfo1">
			<u-modal :show="show" :title="title" :showCancelButton="true" :asyncClose="true" @confirm="confirm"
				:closeOnClickOverlay="true" @cancel="cancel">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			<!-- <u-button @click="show = true">打开</u-button> -->
			<u-button @click="show = true" color="#fff" shape="circle" :customStyle='btnys'>{{neirong}}</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				OrderList: {},
				OrderItem: {
					id: '',
					state: ''
				},
				serviceDetails: {},
				youhui: '',
				serviceId: '',
				btnys: {
					'width': '400rpx',
					'backgroundColor': "#3c9cff",
				},

				neirong: '点击核销',
				show: false,
				title: '核销此订单',
				content: `请您仔细核对订单，此操作不可撤销<br>请谨慎操作！`
			}
		},
		onLoad: function(opt) {
			this.id = opt.id;
			console.log(this.id)
			this.getOrderDetails();

		},
		methods: {
			getOrderDetails() {
				let that = this;
				this.$http({
					url: `/api/management/management/${that.id}`,
					method: 'GET',
					success(res) {
						that.OrderList = res.data.data
						that.serviceId = that.OrderList.serviceId;
						console.log(that.serviceId)
						that.getServiceDetails();
						that.youhui = that.OrderList.totalPrice - that.OrderList.realPrice
					}
				})
				// that.serviceId = that.OrderList.serviceId;
				// console.log(that.serviceId)
			},
			getServiceDetails() {
				let that = this;
				this.$http({
					url: `/api/service/service/${that.serviceId}`,
					method: 'GET',
					success(res) {
						that.serviceDetails = res.data.data
						console.log(res)
					}
				})
			},
			updateOrderDetails() {
				let that = this;
				this.$http({
					url: `/api/management/management`,
					data: that.OrderItem,
					method: 'PUT',
					success(res) {
						console.log(res)
					}
				})
			},
			showModal() {
				this.show = true;
			},
			confirm() {
				this.OrderItem.id = this.id
				this.OrderItem.state = 4
				this.updateOrderDetails();
				this.btnys.backgroundColor = "#808080"
				this.show = false;
				this.neirong = "已核销"
				// setTimeout(() => {
				// 	// 3秒后自动关闭

				// }, 2000)
			},
			cancel() {
				this.show = false;
			},
			returnbtn() {
				uni.$u.route('/pages/wpc/ddgl/ddgl');
			}
		}
	}
</script>

<style lang="scss">
	.bgtop {
		width: 100vw;
		background-color: #3183fc;
		height: 300rpx;
		overflow: auto;
	}

	.top {
		z-index: 3;
		width: 100vw;
		background-color: #3183fc;
		height: 150rpx;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.card {
		width: 95%;
		box-sizing: border-box;
		height: 1000rpx;
		margin: 10px auto;
		position: relative;
		bottom: 150rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 30rpx 25rpx;
	}

	.hr {
		margin-top: 10rpx;
		border: 2px solid #f3f3f3;
		border-radius: 2px;
	}

	.info {
		// border: 1rpx red solid;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderinfo1 {
		margin-top: -100rpx;
	}

	.modal-content {
		padding: 20rpx;
		text-align: center;
	}

	.slot-content {
		text-align: center;
	}
</style>